<template>
    <div class="task">
        <div class="task-tool" >
            <div class="taskBG" style="float:left"> 
                <div>
                    <img src="@/assets/img/任务列表.png" style="width:16px;height:16px;margin-left:16px;margin-top:15px;float:left;"/>
                    <span style="margin-left:5px;height:48px;line-height:48px">任务列表</span>
                    <span v-if="isAdd" style="float:right;margin-right:1.3%;height:47px;line-height:47px">
                        <el-button type="goon" icon="el-icon-plus" size="mini" style="border-color:#1890FF;color: #8AA7ED;" @click="addTaskClick">新增任务</el-button>
                    </span>
                    <span v-else style="float:right;margin-right:1.3%;height:47px;line-height:47px"> </span>
                    <span style="float:right;margin-right:1.3%;height:47px;line-height:47px">
                        <el-input size="mini" placeholder="请输入" v-model="input" class="input-with-select" style="width:272px" @keyup.enter.native="searchClick()"> 
                            <el-button size="mini" slot="append" icon="el-icon-search" @click="searchClick()"></el-button>
                        </el-input>
                    </span>
                </div>
                <hr style='border:0.1px inset #E9E9E9;'>
                <div class="list">
                    <el-table :data="tableData" :header-cell-style="{background: 'rgba(118,201,241,0.10)',color: 'rgba(0,0,0,0.65)'}" style="margin-top:20px">
                        <el-table-column prop="" label="序号" type="index" width="150" align="center"> </el-table-column>
                        <el-table-column prop="projectName" label="工程名称" align="center"> </el-table-column>
                        <el-table-column prop="spiderName" label="爬虫名称" align="center"> </el-table-column>
                        <el-table-column prop="spiderArguments" label="爬虫参数" align="center"> </el-table-column>
                        <el-table-column prop="tags" label="标签" align="center"> </el-table-column>
                        <el-table-column prop="runType" label="任务类型" align="center"> </el-table-column>
                        <el-table-column prop="status" label="采集状态" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.status == '已完成'" style="color:#1E88E5;font-size: 14px;">{{scope.row.status}}</label>
                                <label v-if="scope.row.status == '运行中'" style="color:#66BB6A;font-size: 14px;">{{scope.row.status}}</label>
                                <label v-if="scope.row.status == '等待中'" style="color:#F8C83A;font-size: 14px;">{{scope.row.status}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column prop="warningStatus" label="警告状态" align="center"> 
                            <template slot-scope="scope">
                                <img src="@/assets/img/warning.png" v-if="scope.row.warningStatus == 1" alt>
                                <img src="@/assets/img/noWarning.png" v-if="scope.row.warningStatus == 0" alt>
                            </template>
                        </el-table-column>
                        <el-table-column prop="dateCreate" label="创建时间" align="center"> </el-table-column>
                        <el-table-column prop="logPath" label="日志" align="center">
                            <template slot-scope="scope">
                                <el-button @click="logClick(scope.row)" type="text" size="small" :disabled="scope.row.logPath == null ? true : false">打开
                                    <!-- <label style="font-family: PingFangSC-Regular;font-size: 14px;"></label> -->
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click="closeClick(scope.row)" type="text" size="small" :disabled="scope.row.status !== '运行中' ? true : false || isEdit">关闭</el-button>
                                <!-- <el-button type="text" size="small">编辑</el-button> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页 -->
                <div class="block" style="width:100%;text-align:right;margin-top:10px">
                    <el-pagination @size-change="handleperPageChange" @current-change="handleCurrentChange" :current-page="page"
                    :page-size="perPage" layout="prev, pager, next, total, jumper"
                    :total="total"></el-pagination>
                </div>
            </div>
            <!-- 新增任务 -->
            <el-dialog title="新增任务" width="1200px" :visible.sync="dialogTableVisible">
                <div style="float:left;height:47px;line-height:47px">
                    <el-input size="mini" placeholder="请输入" v-model="inputAdd" class="input-with-select" style="width:272px" @keyup.enter.native="searchAddClick()"> 
                        <el-button size="mini" slot="append" icon="el-icon-search" @click="searchAddClick()"></el-button>
                    </el-input>
                </div>
                <el-table :data="addTaskData" highlight-current-row @current-change="addSelTaskClick" style="cursor: pointer;" header-cell-style="cursor: auto;">
                    <el-table-column property="projectName" label="工程名称" width="250"></el-table-column>
                    <el-table-column property="spiderName" label="爬虫名称" width="200"></el-table-column>
                    <el-table-column property="spiderArguments" label="爬虫参数"></el-table-column>
                    <el-table-column property="tags" label="标签"></el-table-column>
                </el-table>
                <div class="block" style="width:100%;text-align:right;margin-top:10px">
                    <el-pagination @size-change="addPerPageChange" @current-change="addCurrentChange" :current-page="addPage" :page-sizes="[5, 10, 20, 50]"
                    :page-size="addPerPage" layout="prev, pager, next, total, sizes, jumper"
                    :total="addTotal"></el-pagination>
                </div>
                <div style="width:100%;margin-top: 20px;">
                    <el-button @click="runTaskClick()" style="background-color:#8AA7ED;color:#ffffff;">实时启动</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
     data() {
        return {
            loading: '',
            input: '',
            isAdd: true,
            isEdit: false,
            tableData: [],
            page: 1, //当前页
            perPage: 10, //每页多少条数据
            total: 4, //总共多少条数据
            dialogTableVisible: false,
            addTaskData: [],
            selectTaskData: [],
            addPage: 1, 
            addPerPage: 10, 
            addTotal: 4, 
            inputAdd: '',
        };
    },
    methods: {
        // 数据请求
        getData() {
            this.$api.task.taskList(this.page, this.perPage).then(res => {
                console.log(res);
                this.tableData = res.data
                this.total = res.total
            })
            this.$api.user.findUserRight(sessionStorage.getItem('userId')).then((res) => {
                // console.log("用户权限：", res); 
                this.isAdd = this.$api.common.isArrContainStr(res.data, 'kysj:task:add')
                this.isEdit = !this.$api.common.isArrContainStr(res.data, 'kysj:task:edit')
            })
        },
        // 搜索数据请求
        searchGetData() {
            this.$api.task.spiderLogFindByKey(this.input, this.page, this.perPage).then(res => {
                console.log(res)
                this.tableData = res.data
                this.total = res.total
            })
            
        },
        // 新增任务》数据请求
        addGetData() {
            this.$api.task.spiderManagerList(this.addPage, this.addPerPage).then(res => {
                console.log(res)
                this.addTaskData = res.data
                this.addTotal = res.total
            })
        },
        // 新增任务》搜索数据请求
        addSearchGetData() {
            this.$api.task.spiderFindByKey(this.inputAdd, this.addPage, this.addPerPage).then(res => {
                console.log(res)
                this.addTaskData = res.data
                this.addTotal = res.total
            })
        },
        logClick(row) {
            console.log(row);
            window.open(row.logPath)
        },
        // 新增任务
        addTaskClick() {
            console.log('add task');
            this.dialogTableVisible = true;
            this.addGetData()
        },
        // 新增任务》搜索
        searchAddClick() { 
            console.log(this.inputAdd);
            this.addPage = 1
            if(this.inputAdd.length == 0) {
                this.addGetData()
            } else {
                this.addSearchGetData()
            }
        },
        // 新增任务》选中任务
        addSelTaskClick(val) {
            console.log(val);
            this.selectTaskData = val
        },
        runTaskClick() {
            console.log(this.selectTaskData);
            if(this.selectTaskData.length == 0) {
                this.$alert('请选择一条要“实时启动”的任务', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                });
            } else {
                this.$confirm('确定要实时启动这条任务吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.loading = this.$loading({
                            lock: true,
                            text: 'Loading',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        let data = {
                            projectName: this.selectTaskData.projectName,
                            spiderName: this.selectTaskData.spiderName,
                            spiderArguments: this.selectTaskData.spiderArguments,
                            tags: this.selectTaskData.tags,
                            runType: "实时启动"
                        }
                        this.$api.task.runTask(data).then(res => {
                            console.log(res);
                            if(res.code == 200) {
                                this.dialogTableVisible = false;
                                this.loading.close();
                                this.getData()
                            }
                        }) 
                    }).catch(() => {         
                });
            } 
        },
        // 搜索
        searchClick() {
            console.log(this.input);
            this.page = 1
            if(this.input.length == 0) {
                this.getData()
            } else {
                this.searchGetData()
            }
        },
        // 关闭任务
        closeClick(row) {
            console.log(row);
            this.$confirm('确定要关闭这条任务吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = {
                    jobid: row.scrapydJobId,
                    projectName: row.projectName,
                }
                this.$api.task.shutdownTask(data).then(res => {
                    console.log(res);
                    if(res.code == 200) {
                        this.$message({
                            message: '这条任务关闭成功',
                            type: 'success'
                        });
                    } else {
                        let str = '关闭失败原因为：'+res.msg
                        this.$message.error(str);
                    }
                    this.getData()
                })
            }).catch(() => {});
            
        },
        //改变每页多少条数据
        handleperPageChange(val) {
            console.log(val);
            this.perPage = val
            if(this.input.length == 0) {
                this.getData()
            } else {
                this.searchGetData()
            }
        },
        handleCurrentChange(val) {
            console.log(val);
            this.page = val
            if(this.input.length == 0) {
                this.getData()
            } else {
                this.searchGetData()
            }
        },

        //改变每页多少条数据
        addPerPageChange(val) {
            console.log(val);
            this.addPerPage = val
            if(this.inputAdd.length == 0) {
                this.addGetData()
            } else {
                this.addSearchGetData()
            }
        },
        addCurrentChange(val) {
            console.log(val);
            this.addPage = val
            if(this.inputAdd.length == 0) {
                this.addGetData()
            } else {
                this.addSearchGetData()
            }
        },
        
    },
    created:function () {
        this.$emit('header', true);
    },
    mounted(){
        this.getData()
    },
}
</script>

<style lang="less" scoped>
.task {
    height: 930px;
    background-color: #F1F9FD;

    .task-tool {
        // height: 850px;
        width: 98%;
        margin: 0 auto;
        // background-color: #ffffff;

        .taskBG {
            border-radius: 2px;
            margin-top: 20px;
            width: 100%;
            // height: 830px;
            background-color: #ffffff;

            .list {
                // margin-top: 20px;
                width: 98%;
                margin: 0 auto;
                // background: #ebecec;
            }
        }
    }
}

</style>